<template>
<i class="anticon" :style="getSize()">
  <svg :class="svgClass()" aria-hidden="true">
    <use :xlink:href="iconName()"/>
  </svg>
  </i>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
export default class PageView extends Vue {
  @Prop()
  public iconClass?: string;
  @Prop()
  public className?: string;
  @Prop()
  public size: string = "14px";

  public iconName(): string {
    return `#icon-${this.iconClass}`;
  }

  public svgClass(): string {
    if (this.className) {
      return `svg-icon ${this.className}`;
    } else {
      return "svg-icon";
    }
  }

  public getSize():string{
      return `font-size:${this.size}`
  }
}
</script>
<style lang="less" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  overflow: hidden;
}
</style>